<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bank Account Management</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            background-color: #f4f4f4;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-image: url("./img/bank2.jpg");
            background-size: cover;
            background-repeat: no-repeat;
 
        }

        .container {
            display: flex;
        }

        .window{
            background-color: #fff;
            padding: 20px;
            margin: 20px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        input {
            padding: 8px;
            margin-bottom: 16px;
        }
    </style>

    <script src="js/jquery.min.js"></script>
</head>

<body>

<div class="container">
    <div class="window" id="accountBalanceWindow">
        <h2>创建银行账户</h2>
        <label for="accountNumber">账户的密码:</label>
        <input type="text" id="password" required>
        <br>
        <label for="accountmoney">存入的钱:</label>
        <input type="text" id="accountmoney" required>
        <button onclick="Account()">创建</button>
        <div id="accountBalancesResult">

        </div>
    </div>

    <div class="window" id="accountInfoWindow">
        <h2>查询用户名下所有的银行账户信息</h2>
        <button onclick="getAccountInfo()">查询</button>
        <div id="accountResult">
            <!-- <div> -->
                <!-- 卡号：1  余额：1 -->
            <!-- </div> -->
        </div>
    </div>


  

    <div class="window" id="transferWindow">
        <h2>转账</h2>
        <label for="fromAccount">转出账户:</label>
        <input type="text" id="fromAccount" required>
        <label for="toAccount">转入账户:</label>
        <input type="text" id="toAccount" required>
        <label for="amount">转账金额:</label>
        <input type="text" id="amount" required>
        <button onclick="transfer()">转账</button>
    </div>
</div>

<script>
        function Account() {
            var accountPassword = jQuery("#password");
            var accountMoney = jQuery("#accountmoney");
            console.log(accountPassword.val() + accountMoney.val());
            if(accountPassword.val() == "") {
                alert("用户名为空");
            }
            if(accountMoney.val() == "") {
                alert("用户名为空");
            }
            jQuery.ajax({
                url:"/account/create",
                type:"POST",
                data:{
                    "password":accountPassword.val(),
                    "money":accountMoney.val()
                },
                success:function(result) {
                    if(result.code == 200) {
                        alert("创建成功，卡号为："+result.data);
                    } else {
                        alert("未知错误");
                    }
                },
                error:function(err) {
                    if(err!=null&&err.status==401) {
                        alert("用户未登录，即将跳转登录页面");
                        location.href="login.html";
                    }
                }
            });
        }

        function getAccountInfo() {
            jQuery("#accountResult").html("");
            jQuery.ajax({
                url:"/account/selectall",
                type:"POST",
                success:function(result) {
                    if(result.code == 200 && result.data != null && result.data.length>0) {
                        console.log(result.data);
                        var finalHtml = "";
                        for(var i = 0;i<result.data.length;i++) {
                            var item = result.data[i];
                            finalHtml += '<div>卡号：' + item.number + ' 余额：'+item.money +'</div>';
                        }
                        jQuery("#accountResult").html(finalHtml); 
                    }
                    else if(result.data == null || result.data.length == 0) {
                        var finalHtml = "";
                        finalHtml += '<div>没有账户</div>';
                        jQuery("#accountResult").html(finalHtml); 
                    }
                }
            });
        }

        function transfer() {
            // 发送请求到后端执行转账操作
            // 处理后端返回的数据，并更新页面上的结果区域
            var fromAccount = jQuery("#fromAccount");
            var toAccount = jQuery("#toAccount");
            var amount = jQuery("#amount");
            alert("转账注意诈骗");
            jQuery.ajax({
                url:"/account/transfer",
                type:"POST",
                data:{
                    "num1":fromAccount.val(),
                    "num2":toAccount.val(),
                    "money":amount.val()
                },
                success:function(result) {
                    if(result.code==200) {
                        alert("转账成功");
                    } else {
                        alert(result.msg);
                    }
                }
            });
        }

    </script>
</body>

</html>